<template>
  <div class="time-select-demo">
    <h2>时间选择器组件演示</h2>
    <p class="demo-desc">支持单个时间选择和时间段选择，样式与多选框风格一致</p>

    <div class="demo-container">
      <div class="demo-section">
        <h3>🕐 基础时间选择</h3>
        <div class="demo-item">
          <label class="demo-label">选择时间:</label>
          <TimeSelectComponent v-model="basicTime" placeholder="请选择时间" />
          <span class="demo-value">当前值: {{ basicTime || "未选择" }}</span>
        </div>

        <div class="demo-item">
          <label class="demo-label">包含秒数:</label>
          <TimeSelectComponent
            v-model="timeWithSeconds"
            placeholder="请选择时间"
            :showSeconds="true"
          />
          <span class="demo-value"
            >当前值: {{ timeWithSeconds || "未选择" }}</span
          >
        </div>
      </div>

      <div class="demo-section">
        <h3>⏰ 时间段选择</h3>
        <div class="demo-item">
          <label class="demo-label">工作时间:</label>
          <TimeSelectComponent
            v-model="workTimeRange"
            :isRange="true"
            startPlaceholder="开始时间"
            endPlaceholder="结束时间"
          />
          <div class="demo-value">
            <p>开始时间: {{ workTimeRange?.[0] || "未选择" }}</p>
            <p>结束时间: {{ workTimeRange?.[1] || "未选择" }}</p>
          </div>
        </div>

        <div class="demo-item">
          <label class="demo-label">活动时间:</label>
          <TimeSelectComponent
            v-model="activityTimeRange"
            :isRange="true"
            startPlaceholder="活动开始"
            endPlaceholder="活动结束"
          />
          <div class="demo-value">
            <p>时间段: {{ formatTimeRange(activityTimeRange) }}</p>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>⚙️ 系统设置场景</h3>
        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-title">免打扰时间</div>
              <div class="setting-desc">设置免打扰的时间段</div>
            </div>
            <TimeSelectComponent
              v-model="quietTimeRange"
              :isRange="true"
              startPlaceholder="开始时间"
              endPlaceholder="结束时间"
            />
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-title">自动备份时间</div>
              <div class="setting-desc">每日自动备份的时间</div>
            </div>
            <TimeSelectComponent
              v-model="backupTime"
              placeholder="选择备份时间"
            />
          </div>

          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-title">会议提醒</div>
              <div class="setting-desc">会议开始前提醒时间</div>
            </div>
            <TimeSelectComponent
              v-model="meetingRemindTime"
              placeholder="提醒时间"
              :showSeconds="true"
            />
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>🔄 课程安排</h3>
        <div class="schedule-list">
          <div
            v-for="(course, index) in courses"
            :key="index"
            class="course-item"
          >
            <div class="course-info">
              <input
                v-model="course.name"
                class="course-name"
                placeholder="课程名称"
              />
            </div>
            <div class="course-time">
              <TimeSelectComponent
                v-model="course.timeRange"
                :isRange="true"
                startPlaceholder="开始"
                endPlaceholder="结束"
              />
            </div>
            <button
              class="remove-btn"
              @click="removeCourse(index)"
              v-if="courses.length > 1"
            >
              删除
            </button>
          </div>
          <button class="add-btn" @click="addCourse">+ 添加课程</button>
        </div>
      </div>

      <div class="demo-section">
        <h3>📊 数据预览</h3>
        <div class="data-preview">
          <div class="preview-card">
            <h4>基础时间</h4>
            <p>基础时间: {{ basicTime || "未设置" }}</p>
            <p>含秒时间: {{ timeWithSeconds || "未设置" }}</p>
          </div>

          <div class="preview-card">
            <h4>时间段设置</h4>
            <p>工作时间: {{ formatTimeRange(workTimeRange) }}</p>
            <p>活动时间: {{ formatTimeRange(activityTimeRange) }}</p>
            <p>免打扰: {{ formatTimeRange(quietTimeRange) }}</p>
          </div>

          <div class="preview-card">
            <h4>系统设置</h4>
            <p>备份时间: {{ backupTime || "未设置" }}</p>
            <p>会议提醒: {{ meetingRemindTime || "未设置" }}</p>
          </div>

          <div class="preview-card">
            <h4>课程安排</h4>
            <div
              v-for="(course, index) in courses"
              :key="index"
              class="course-preview"
            >
              <p>
                {{ course.name || `课程${index + 1}` }}:
                {{ formatTimeRange(course.timeRange) }}
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>🚫 禁用状态</h3>
        <div class="demo-item">
          <label class="demo-label">禁用的时间选择器:</label>
          <TimeSelectComponent
            v-model="disabledTime"
            placeholder="已禁用"
            :disabled="true"
          />
        </div>

        <div class="demo-item">
          <label class="demo-label">禁用的时间段选择器:</label>
          <TimeSelectComponent
            v-model="disabledTimeRange"
            :isRange="true"
            :disabled="true"
            startPlaceholder="已禁用"
            endPlaceholder="已禁用"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeSelectComponent from "@/components/form/timeSelect.vue";

export default {
  name: "TimeSelectDemo",
  components: {
    TimeSelectComponent,
  },
  data () {
    return {
      // 基础时间
      basicTime: "09:30",
      timeWithSeconds: "14:30:00",

      // 时间段
      workTimeRange: ["09:00", "18:00"],
      activityTimeRange: ["19:00", "21:30"],
      quietTimeRange: ["22:00", "08:00"],

      // 系统设置
      backupTime: "02:00",
      meetingRemindTime: "09:00:00",

      // 课程安排
      courses: [
        { name: "Vue.js 基础", timeRange: ["09:00", "10:30"] },
        { name: "JavaScript 进阶", timeRange: ["14:00", "15:30"] },
      ],

      // 禁用状态
      disabledTime: "12:00",
      disabledTimeRange: ["12:00", "13:00"],
    };
  },
  methods: {
    formatTimeRange (timeRange) {
      if (!timeRange || !Array.isArray(timeRange)) {
        return "未设置";
      }
      return `${timeRange[0] || "未设置"} - ${timeRange[1] || "未设置"}`;
    },

    addCourse () {
      this.courses.push({
        name: "",
        timeRange: ["", ""],
      });
    },

    removeCourse (index) {
      this.courses.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.time-select-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h2 {
    color: #333;
    margin-bottom: 10px;
    text-align: center;
  }

  .demo-desc {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 14px;
  }

  .demo-container {
    display: grid;
    gap: 30px;
  }

  .demo-section {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #f0f0f0;

    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .demo-item {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .demo-label {
        font-size: 14px;
        color: #555;
        font-weight: 500;
      }

      .demo-value {
        font-size: 14px;
        color: #666;

        p {
          margin: 4px 0;
        }
      }
    }
  }

  .settings-card {
    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 12px;
      transition: all 0.3s ease;

      &:hover {
        border-color: #4b58dc;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .setting-info {
        .setting-title {
          font-size: 16px;
          color: #333;
          margin-bottom: 5px;
          font-weight: 500;
        }

        .setting-desc {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }

  .schedule-list {
    .course-item {
      display: grid;
      grid-template-columns: 1fr 240px auto;
      align-items: center;
      gap: 15px;
      padding: 15px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 12px;
      background: #fafafa;

      .course-name {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        background: #fff;

        &:focus {
          outline: none;
          border-color: #4b58dc;
        }
      }

      .remove-btn {
        padding: 6px 12px;
        background: #f56565;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;

        &:hover {
          background: #e53e3e;
        }
      }
    }

    .add-btn {
      padding: 12px 20px;
      background: #4b58dc;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background: lighten(#4b58dc, 10%);
        transform: translateY(-1px);
      }
    }
  }

  .data-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;

    .preview-card {
      padding: 20px;
      background: linear-gradient(135deg, #f5f7ff, #e8f2ff);
      border-radius: 8px;
      border: 1px solid #d1e5ff;

      h4 {
        color: #4b58dc;
        margin-bottom: 15px;
        font-size: 16px;
      }

      p {
        margin: 8px 0;
        font-size: 14px;
        color: #666;
      }

      .course-preview p {
        background: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        margin: 6px 0;
        border: 1px solid #eee;
      }
    }
  }
}

@media (max-width: 768px) {
  .time-select-demo {
    padding: 15px;

    .demo-section .demo-item {
      grid-template-columns: 1fr;
      gap: 10px;

      .demo-label {
        font-weight: 600;
      }
    }

    .schedule-list .course-item {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .data-preview {
      grid-template-columns: 1fr;
    }
  }
}
</style>
